<template>
  <!-- 死亡证明弹窗 -->
  <el-dialog v-if="dialogVisible" :title="`【${fileName}】下载`" :visible.sync="dialogVisible" width="1188px"
    class="death-book-dialog">
    <DeathCard v-model="info" ref="deathCard" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="handleDownload" :loading="exportLoading">下 载</el-button>
      <el-button type="success" @click="handlePrint">打 印</el-button>
    </span>
  </el-dialog>
</template>

<script>
import DeathCard from '@/components/DeathCard';
import { getExactType } from '@/utils';
import { toPng } from 'html-to-image';

export default {
  name: "DeathCertificate",
  components: { DeathCard },
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: "value",
    event: "input",
  },
  watch: {

  },

  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  computed: {
    birthDateObj() {
      let map = {};
      this.info.birthDate && (map = this.info.birthDate.split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    deathDateObj() {
      let map = {};
      this.info.deathDate && (map = this.info.deathDate.split(' ')[0].split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    dialogVisible: {
      get() {
        return this.value || false;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
  data() {
    return {
      exportLoading: false,
      fileName: '居民死亡医学证明（推断）书',
    };
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
    },
    handlePrint() {
      const query = { ...this.$route.query }
      delete query.from;
      const url = this.$router.resolve({ name: 'PrintDeathCard', query }).href;
      window.open(url, '_blank')

    },
    handleDownload() {
      this.exportLoading = true
      const node = this.$refs.deathCard.$el;
      toPng(node)
        .then((dataUrl) => {
          const link = document.createElement('a')
          link.download = `${this.fileName}-${this.info.name}-${this.info.serialNumber}.png`
          link.href = dataUrl
          link.click()
          link.addEventListener('click', () => {
            link.remove()
          })
          this.exportLoading = false
          this.dialogVisible = false;
        })
        .catch((error) => {

          console.log("🚀 ~ handleDownload ~ error:", error)

          this.$message.warning('出现未知错误，请重试')
          this.exportLoading = false
        })
    },
  }
}
</script>


<style lang="scss" scoped>
.death-book-dialog {
  &::v-deep {
    .el-dialog__body {
      padding: 0;
    }
  }
}
</style>
